<template>
    <div class="">
        <div class="header">
            <div class="header-btnLeft"  @click="$router.go(-1)"><img src="../assets/back-btn.png"></div>
            <h1 class="header-title">用户评价</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h30"></div>
        <div class="comment">
            <div class="comment-list">
                <div class="comment-list-item" v-for="(item,index) in commentArr">
                    <div class="comment-list-item-head">
                        <img class="comment-list-item-head-avatar" :src="/^(http|https):\/\//.test(item.touxiang) ? item.touxiang : url+item.touxiang" />
                        <div class="comment-list-item-head-title">
                            <div class="comment-list-item-head-username">{{item.member_nickname}}</div>
                            <div class="comment-list-item-head-date">{{item.creattime}}</div>
                        </div>
                    </div>
                    <div class="comment-list-item-desc">{{item.content}}</div>
                    <div class="comment-list-item-imgs">
                        <img v-for="item2 in item.comment_img"  :src="/^(http|https):\/\//.test(item2.src) ? item2.src : url+item2.src" :preview="index" />
                    </div>
                </div>
                <div class="comment-list-item"  v-if="commentArr.length<=0" >暂无用户评价</div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from "../store/config"

    export default {
        name: "Comment",
        data() {
            return {
                url:config.url,
                goods_id:0,
                commentArr:[]
            }
        },
        methods: {
            getData() {
                let _that = this;
                let params = {
                    goods_id: _that.goods_id,
                }
                _that.axios.post('wapcomment', params)
                    .then(res => {
                        _that.commentArr=res.data
                    })
                    .catch(err => console.log(err));
            },
        },
        mounted(){
            this.goods_id = this.$route.params.goods_id;
            this.getData();
        },
        updated(){
            this.$previewRefresh() ////图片异步生成，图片数据更新后调用：
        }
    }
</script>

<style lang="scss" scoped>

    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }


    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }

    }


    //评论

    .comment{
        &-list{
            &-item{
                border-bottom: solid 1px $color2;
                padding: rpx(30);
                &-head{
                    display: flex;
                    align-items: center;
                    padding: rpx(20) 0;
                    &-avatar{
                        width:rpx(80);
                        height:rpx(80);
                    }
                    &-title{
                        padding: rpx(10) rpx(20);
                    }
                    &-username{
                        font-size:rpx(30);
                    }
                    &-date{
                        padding-top: rpx(10);
                        font-size:rpx(24);
                        font-size: $color5;
                    }
                }
                &-desc{
                    font-size: rpx(26);
                    line-height: 160%;
                    word-wrap:break-word;
                    word-break:normal;
                }
                &-imgs{
                    padding: rpx(20) 0;
                    img{
                        width:30.3%;
                        height: rpx(220);
                        margin-right: 3%;
                        margin-bottom: rpx(20);
                    }
                }
            }
        }
        &-more{
            &-url{
                display: block;
                padding: rpx(20) rpx(30) ;
                font-size: rpx(34);
                text-align: center;
                border:#b5b5b5 solid 1px;
                border-radius:$radius6;
            }
        }
    }


</style>